<template>
    <div class="works-upload-container">
        <i-form ref="model" :model="model" :rules="ruleValidate">
            <Row type="flex">
                <i-col span="24">
                    <Form-item label="被调查人" prop="parties">
                        <i-input v-model="model.parties" type="textarea" placeholder="请输入被调查人"></i-input>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="24">
                    <Form-item label="纠纷主要事实和争议事项" prop="dispute">
                        <i-input v-model="model.dispute" type="textarea" placeholder="请输入纠纷主要事实和争议事项"></i-input>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="24">
                <Form-item label="调解人员" prop="users_id">
                    <i-select v-model="model.users_id" style="width: 100%"
                              :clearable="true"
                              placeholder="请选择调解组织">
                        <i-option v-for="item in mediators" :value="item.value"
                                  :key="item.value">{{item.label}}
                        </i-option>
                    </i-select>
                </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="24">
                    <Form-item label="调解达成的协议" prop="mediation_result">
                        <i-input v-model="model.mediation_result" type="textarea" placeholder="请输入调解达成的协议"></i-input>
                    </Form-item>
                </i-col>
            </Row>
            <Row type="flex">
                <i-col span="24">
                    <div class="pull-right">
                        <i-button type="primary" @click="onPrev" :disabled="nextDisabled">上一步</i-button>
                        <i-button type="primary" @click="onNext" :disabled="nextDisabled">下一步</i-button>
                    </div>
                </i-col>
            </Row>
        </i-form>
    </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    props: {
      caseId: {
        type: [Number,String],
        default: 0
      },
      stateManager: {
        type: Object
      }
    },
    data () {
      return {
        loading: false,
        model: this.$modelDataSource({
          url: '/api/investigation',
          dataKey: 'model',
          attributes: {
            id: 0,
            case_id: '',
            users_id: '',
            dispute:'',
            parties:'',
            mediation_result:''
          }
        }),
        ruleValidate: {

          users_id: [
            {required: true, type: 'number', message: '请填写调解人员', trigger: 'change'}
          ],
          mediation_result: [
            {required: true, message: '请填写调解达成的协议', trigger: 'blur'}
          ],
          dispute: [
            {required: true, message: '请填写纠纷主要事实和争议事项', trigger: 'blur'}
          ],
          parties: [
            {required: true, message: '请填写被调查人', trigger: 'blur'}
          ],
        },
        nextDisabled: false
      }
    },

    created () {
      let self = this
      this.$store.dispatch('fetchMediatorList')
      if(this.caseId){
        this.model.fetch(this.caseId, {}, function () {
          self.stateManager.buttonLoading = false;
          self.stateManager.editDialogVisible = true;
        }, function () {
          self.stateManager.buttonLoading = false;
        });
      }
    },
    methods: {
      onNext (e) {
        let self = this;
        self.$refs['model'].validate((valid) => {
          if (valid) {
            self.model.case_id = self.caseId
            self.model.uuid = self.model.id
            console.log('表单验证通过');
            self.model.save(function () {
              self.$Notice.success({
                title: '保存成功',
              });
              self.$emit('next',self.caseId)
            }, function () {
            });
          } else {
            console.log('表单验证失败');
      }
      });
      },
      onPrev (e) {
        this.$emit('prev', this.caseId)
      },

    },
    computed: {
      mediators () {
        return this.$store.state.mediators;
      },
    }
  }
</script>
